<template>
	<!-- :class="{ show: show_inp }" -->
	<view
		class="reply_p jj_kt_a"
		:style="{
			bottom: `${input_bottom}rpx`,
		}"
	>
		<view class="reply_box">
			<view class="reply_view">
				<input
					type="text"
					class="inp"
					:placeholder="item.placeholder || '评论一下...'"
					placeholder-class="placeholder"
					:adjust-position="false"
					v-model="value"
					:focus="myfocus"
					@input="inInput($event)"
					@blur="blurInput($event)"
					@confirm="inInput_confirm()"
				/>
			</view>
			<view class="send_view" v-if="show_send" @click="click_confirm()">发送</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myReplyInput',
	props: {},
	watch: {},
	data() {
		return {
			show_inp: false,
			show_send: false,
			value: '',
			input_bottom: -120,
			myfocus: false,
			item: {},
			index: 0,
		};
	},
	created() {
		this.onHeightChange();
	},
	beforeDestroy() {
		this.offHeightChange();
	},
	mounted() {},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
			// _this.getStickyH('#mybtns')
		},
		initComponent(item = {}, index = 0) {
			let _this = this;
			_this.myfocus = true;
			_this.value = '';
			_this.item = item;
			_this.index = index;
			_this.$forceUpdate();
		},
		closeComponent(item = {}, index = 0) {
			let _this = this;
			_this.myfocus = false;
			// _this.item = {};
			// _this.index = 0;
		},
		inInput(e) {
			let _this = this;
			// console.log(_this.value, e);
			if (_this.value) {
				_this.show_send = true;
			} else {
				_this.show_send = false;
			}
		},
		blurInput() {
			let _this = this;
			_this.closeComponent();
		},

		inInput_confirm() {
			// console.log({ item: this.item, index: this.index, value: this.value });
			this.$emit('confirm', { item: this.item, index: this.index, value: this.value });
		},

		click_confirm() {
			let _this = this;
			// console.log({ item: _this.item, index: _this.index, value: _this.value });
			_this.$emit('confirm', { item: _this.item, index: _this.index, value: _this.value });
		},
		replyChange_fun(res) {
			let _this = this;
			if (res.height > 0) {
				_this.input_bottom = _this.pxTorpx(res.height);
			} else {
				_this.input_bottom = -120;
			}
			console.log(_this.input_bottom);
		},
		onHeightChange() {
			let _this = this;
			uni.onKeyboardHeightChange(_this.replyChange_fun);
		},
		offHeightChange() {
			let _this = this;
			console.log('offHeightChange');
			uni.offKeyboardHeightChange(_this.replyChange_fun);
		},
	},
};
</script>

<style lang="scss">
.reply_p {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20rpx 40rpx;
	background-color: #fff;
	// transition: bottom 0.2s;

	opacity: 1;
	visibility: visible;

	// opacity: 0;
	// visibility: hidden;
	// &.show {
	// 	opacity: 1;
	// 	visibility: visible;
	// }
	.reply_box {
		display: flex;
		align-items: center;
	}

	.reply_view {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		padding: 0 40rpx;
		background-color: #f3f4f8;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 38rpx;
		display: flex;
		align-items: center;
		.inp {
			width: 100%;
		}
	}
	.send_view {
		margin-left: 20rpx;
		flex-shrink: 0;
		height: 60rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #45d0a6;
		color: #ffffff;
		font-weight: 400;
		font-size: 24rpx;
	}
}
</style>
